Post
Ask Question

Getting Started with Ignite UI igGrid

Hello everyone, hope you're doing well. I received an Infragistics Ultimate subscription yesterday and I'm really happy about it. It is gifted to every C# Corner MVP. Thank you Casey McGuigan, Infragistics, for the lovely gift and C# Corner for making it happen.

Community licenece

C sharp corner

And I was like.

Exicted

Thus, I happily headed to Infragistics.com, redeemed my coupon and I had the subscription activated in my account. I can explore a whole bunch of applications. They offer a wide range of intuitive UI tools. "JavaScript / HTML5" controls are my first love here and I'm gonna explore them first.

Windows form

From the list of available downloads, I chose "Ignite UI 2016 Vol.1 Complete Bundle". I downloaded and installed it. To proceed, go to your Program Files > Infragistics > 2016.1 > Ignite UI folder.

Mobile

Inside the folder, I saw a few folders that contain the files for a variety of projects. The lovely part is, if you're a developer, working with ASP.NET MVC, there's a library available for you.

For now, I wanted to give JS/HTML combination a start. Thus, I created a blank Application. I also pasted a CSS & a JS folder into the project from the above location.

Css

I have highlighted a few of them. Under CSS, you need to add "infragistics.css" from the Structure folder and any theme of your choice from the Themes folder. For the script part, two libraries are required at the basic level: "infragistics.core.js" and "infragistics.lob.js".

Please note that Ignite UI has a dependency on jQuery and jQuery UI. Hence, I added them too, using NuGet commands.

Install-Package jQuery
Install-Package jQuery.UI.Combined

Thus, I wanted to try igGrid, just out of interest. I took a blank HTML5 document and added the following required JS & CSS files.

Css file

I also added a container to hold my grid

Container body

OK, the structure is ready now. The time to write the scripts to generate the grid has come and the script is as follows:

Prepare data

Next, initialize the grid and bind the data to it.

Grid and bind

As simple as that. I'm just amazed that it allow me to generate a grid, using a couple of lines of the code and nothing more. Wow! Surprisingly, that's all the code I had to write.

Here's the complete HTML for the page.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="css/themes/metro/infragistics.theme.css" rel="stylesheet" />
    <link href="css/structure/infragistics.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.0.0.js"></script>
    <script src="Scripts/jquery-ui-1.11.4.js"></script>
    <script src="js/infragistics.core.js"></script>
    <script src="js/infragistics.lob.js"></script>
</head>
<body>
    <div id="dataGrid">
        <!-- this is where grid will be initialized. -->
    </div>
<script>
    //prepare data
    var data = [
        { FirstName: "John", LastName: "M.", ContactNo: "9898989801" },
        { FirstName: "Raj", LastName: "Kumar", ContactNo: "9898989802" },
        { FirstName: "Manoj", LastName: "Sarkar", ContactNo: "9898989803" },
        { FirstName: "Neeraj", LastName: "Pal", ContactNo: "9898989804" },
        { FirstName: "Praveen", LastName: "Yadav", ContactNo: "9898989805" },
        { FirstName: "Shubham", LastName: "Saxena", ContactNo: "9898989806" },
        { FirstName: "Vaibhav", LastName: "Kohli", ContactNo: "9898989807" }
    ];
    //on load
    (function ($) {
        //initialize the grid
        $('#dataGrid')
            .igGrid({
                dataSource: data
            });
    })(jQuery);
</script>
</body>
</html>

And I hit F5, and I got this nice-looking grid on my screen. Claps for igGrid! Just with a few lines of code you will be able to create a beautiful and responsive grid layout.

First name

igGrid is very flexible and it allows a whole lot of grid customization. That's it for now, hope you loved it too.

Download the sample code from my GitHub repo here.

I will be exploring every option of it and will keep you posted. Follow me for the updates in regards to further posts on Ignite UI. Hope you enjoyed reading this. Please share your valuable feedback in the comments section.


Similar Articles